import React, { Component } from "react";
import { Carousel, WingBlank ,Toast} from "antd-mobile";
import {
  getHomeSwiperList,
  getHomeCarList,
  getHomeGoodsList,
} from "../../data/api";
import "./Home.scss";
import SearchInput from "../search/SearchInput";
import{withRouter} from "react-router-dom";
class Home extends Component {
  state = {
    homeSwiper: [],
    homeCarList: [],
    headList: [],
  };
  async componentDidMount() {
    let res = await getHomeSwiperList();
   
    let ress = await getHomeCarList();
    
    let headList = await getHomeGoodsList();
    this.setState(()=>{
      return {
        homeSwiper: res.message,
        homeCarList: ress.message,
        headList: headList.message,
      }
    })
    // console.log(res.message)
  }
  //去详情页面
  handleClickGoDetails=(goods_id) => {
    // console.log(goods_id)
    this.props.history.push("GoodDatail/"+goods_id)
  }
  //去分类页面
  handleClickGoSort=(params) => {
    console.log(params)
    if(params){
      console.log(111)
      this.props.history.push("/community")
    }else{
      Toast.info("没有这些数据哦，亲！",1)
      console.log(2222)
    }
  }
    // this.props.histroy.push("Community"+params)
  render() {
    return (
      <div className="headerWrap">
        <SearchInput></SearchInput>
        <WingBlank style={{marginTop:60}}>
          <Carousel autoplay={true} infinite={true}>
            {this.state.homeSwiper.map((val) => (
              <a
                key={val}
                href={val.navigator_url}
                style={{
                  display: "inline-block",
                  width: "100%",
                  height: this.state.imgHeight,
                }}
              >
                <img
                  src={val.image_src}
                  alt=""
                  style={{ width: "100%", verticalAlign: "top" }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </WingBlank>
        <div className="homeCarItems">
          {this.state.homeCarList.map((v, i) => {
            // console.log(v)
            return (
              <div className="homeCarList" key={i}>
                <img src={v.image_src} alt="" className="homeCarImg" key={v} onClick={this.handleClickGoSort.bind(this,v.navigator_url)}/>
              </div>
            );
          })}
        </div>
        <div className="homeGoodsList">
          {this.state.headList.map((vall, index) => {
            // console.log(vall.goods);
            return (
              <div className="homeGoodsListHead" key={index}>
                <img
                  src={vall.group_img}
                  alt=""
                  className="homeGoodsListHeadImg"
                />
                <div className="homeGoodsConent">
                  {vall.goods.map((vals, item) => {
                    return (
                      <div className="homeGoodsListItem" key={item} onClick={this.handleClickGoDetails.bind(this,vals.goods_id)}>
                        <img
                          src={vals.goods_small_logo}
                          alt=""
                          className="homeGoodsListImg"
                        />
                        <span className="homeGoodsListName">
                          {vals.goods_name}
                        </span>
                        <span className="homeGoodsListNum">
                          ￥{vals.goods_price}
                        </span>
                        <span className="homeGoodsListLike">找相似</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
export default withRouter(Home)